<template>
  <div class="bg ">
    <view class="prod-tab">
      <text :style="flag=='1'? 'font-size: 42rpx;': 'font-size: 32rpx;'" @tap="toCardPage('1')">贷款</text>
      <text style="color: #cccccc; margin:0 2px">|</text>
      <text :style="flag=='2'? 'font-size: 42rpx;': 'font-size: 32rpx;'" @tap="toCardPage('2')">信用卡</text>
    </view>
    <LoanList v-if="flag=='1'"></LoanList>
    <CardList v-if="flag=='2'"></CardList>
  </div>
</template>

<script>
import LoanList from "./LoanList"
import CardList from "./CardList"
export default {
  components: {LoanList, CardList},
  data() {
    return {
      flag: '1'
    }
  },
  methods:{
    toCardPage(flag) {
      this.flag = flag
    }
  }
  
}
</script>

<style lang="scss" scoped>

.bg {
  background-color: #f7f7f7;
}
.prod-tab {
  display: flex;
  background-image: linear-gradient(to bottom, #0033d3, #0d93d3);
  flex-direction: row;
  justify-content: center;
  height: 45px;
  align-items: center;
  
  color: #fff;
}
</style>